﻿<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
        <meta name="author" content="Bdtask">
        <title>Bhulua - Bootstrap 4 Admin Template Deshboard</title>
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/dist/img/favicon.png">
        <!--Global Styles(used by all pages)-->
        <link href="http://cdn.bootstrapmb.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
        <link href="assets/plugins/fontawesome/css/all.min.css" rel="stylesheet">
        <link href="assets/plugins/typicons/src/typicons.min.css" rel="stylesheet">
        <link href="assets/plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
        <!--Third party Styles(used by this page)--> 

        <!--Start Your Custom Style Now-->
        <link href="assets/dist/css/style.css" rel="stylesheet">
    </head>
    <body class="fixed">
        <!-- Page Loader -->
        <div class="page-loader-wrapper">
            <div class="loader">
                <div class="preloader">
                    <div class="spinner-layer pl-green">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
                <p>Please wait...</p>
            </div>
        </div>
        <!-- #END# Page Loader -->
        <div class="wrapper">
            <!-- Sidebar  -->
            <nav class="sidebar sidebar-bunker">
                <div class="sidebar-header">
                    <!--<a href="index.html" class="logo"><span>bd</span>task</a>-->
                    <a href="index.html" class="logo"><img src="assets/dist/img/logo.png" alt=""></a>
                </div><!--/.sidebar header-->
                <div class="profile-element d-flex align-items-center flex-shrink-0">
                    <div class="avatar online">
                        <img src="assets/dist/img/avatar-1.jpg" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="profile-text">
                        <h6 class="m-0">Naeem Khan</h6>
                        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caafb2aba7baa6af8aada7aba3a6e4a9a5a7">[email&#160;protected]</a></span>
                    </div>
                </div><!--/.profile element-->
                <form class="search sidebar-form" action="#" method="get" >
                    <div class="search__inner">
                        <input type="text" class="search__text" placeholder="Search...">
                        <i class="typcn typcn-zoom-outline search__helper" data-sa-action="search-close"></i>
                    </div>
                </form><!--/.search-->
                <div class="sidebar-body">
                    <nav class="sidebar-nav">
                        <ul class="metismenu">
                            <li class="nav-label">Main Menu</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-home-outline mr-2"></i>
                                    Dashboard
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="index.html">Default</a></li>
                                    <li><a href="dashboard_two.html">Dashboard Two</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-chart-pie-outline mr-2"></i>
                                    Charts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="charts_flot.html">Flot Chart</a></li>
                                    <li><a href="charts_Js.html">Chart js</a></li>
                                    <li><a href="charts_morris.html">Morris Charts</a></li>
                                    <li><a href="charts_sparkline.html">Sparkline Charts</a></li>
                                    <li><a href="charts_am.html">Am Charts</a></li>
                                    <li><a href="charts_apex.html">Chart Apex</a></li>
                                </ul>
                            </li>
                            <li><a href="chat.html"><i class="typcn typcn-messages mr-2"></i> Chat</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-mail mr-2"></i>
                                    Mailbox
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="mailbox.html">Mailbox</a></li>
                                    <li><a href="mailbox_details.html">Mailbox Details</a></li>
                                    <li><a href="compose.html">Compose</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-archive mr-2"></i>
                                    Tables
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="tables_bootstrap.html">Bootstrap tables</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Data tables</a>
                                        <ul class="nav-third-level">
                                            <li><a href="tables_data_basic.html">Basic initialization</a></li>
                                            <li><a href="tables_data_sources.html">Data sources</a></li>
                                            <li><a href="tables_data_api.html">API</a></li>
                                            <li><a href="tables_data_styling.html">Styling</a></li>
                                            <li><a href="tables_data_advanced.html">Advanced initialization</a></li>
                                            <li><a href="tables_data_bootstrap4.html">Bootstrap4</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="tables_foo.html">FooTable</a></li>
                                    <li><a href="tables_jsgrid.html">Jsgrid table</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-clipboard mr-2"></i>
                                    Forms
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="forms_basic.html">Basic Forms</a></li>
                                    <li><a href="forms_input_group.html">Input group</a></li>
                                    <li><a href="forms_mask.html">Form Mask</a></li>
                                    <li><a href="forms_touchspin.html">Touchspin</a></li>
                                    <li><a href="forms_select.html">Select</a></li>
                                    <li><a href="forms_cropper.html">Cropper</a></li>
                                    <li><a href="forms_file_upload.html">Forms File Upload</a></li>
                                    <li><a href="forms_editor_ck.html">CK Editor</a></li>
                                    <li><a href="forms_editor_summernote.html">Summernote</a></li>
                                    <li><a href="forms_wizard.html">Form Wizaed</a></li>
                                    <li><a href="forms_editor_markdown.html">Markdown</a></li>
                                    <li><a href="forms_editor_trumbowyg.html">Trumbowyg</a></li>
                                    <li><a href="forms_editor_wysihtml5.html">Wysihtml5</a></li>
                                </ul>
                            </li>
                            <li class="nav-label">Components</li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-coffee mr-2"></i>
                                    UI Elements
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="ui_buttons.html">Buttons</a></li>
                                    <li><a href="ui_badges.html">Badges</a></li>
                                    <li><a href="ui_spinners.html">Spinners</a></li>
                                    <li><a href="ui_tabs.html">Tab</a></li>
                                    <li><a href="ui_notification.html">Notification</a></li>
                                    <li><a href="ui_tree_view.html">Tree View</a></li>
                                    <li><a href="ui_progressbars.html">Progressber</a></li>
                                    <li><a href="ui_list_view.html">List View</a></li>
                                    <li><a href="ui_ratings.html">Ratings</a></li>
                                    <li><a href="ui_datetime_picker.html">Date & Time Picker</a></li>
                                    <li><a href="ui_typography.html">Typography</a></li>
                                    <li><a href="ui_modals.html">Modals</a></li>
                                    <li><a href="ui_icheck_toggle_pagination.html">iCheck, Toggle, pagination</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-world-outline mr-2"></i>
                                    Maps
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="maps_amcharts.html">Amcharts Map</a></li>
                                    <li><a href="maps_gmaps.html">gMaps</a></li>
                                    <li><a href="maps_data.html">Data Maps</a></li>
                                    <li><a href="maps_jvector.html">Jvector Maps</a></li>
                                    <li><a href="maps_google.html">Google map</a></li>
                                    <li><a href="maps_snazzy.html">Snazzy Map</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-info-large-outline mr-2"></i>
                                    Icons
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="icons_bootstrap.html">Bootstrap Icons</a></li>
                                    <li><a href="icons_fontawesome.html">Fontawesome Icon</a></li>
                                    <li><a href="icons_flag.html">Flag Icons</a></li>
                                    <li><a href="icons_material.html">Material Icons</a></li>
                                    <li><a href="icons_weather.html">Weather Icons </a></li>
                                    <li><a href="icons_line.html">Line Icons</a></li>
                                    <li><a href="icons_pe.html">Pe Icons</a></li>
                                    <li><a href="icon_socicon.html">Socicon Icons</a></li>
                                    <li><a href="icons_typicons.html">Typicons Icons</a></li>
                                </ul>
                            </li>
                            <li><a href="widgets.html"><i class="typcn typcn-gift mr-2"></i>Widgets</a></li>
                            <li><a href="calender.html"><i class="typcn typcn-calendar-outline mr-2"></i>Calendar</a></li>
                            <li class="nav-label">Extra</li>
                            <li class="mm-active">
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-device-tablet mr-2"></i>
                                    App Views
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="invoice.html">Invoice</a></li>
                                    <li><a href="invoice2.html">Invoice two</a></li>
                                    <li><a href="timeline_horizontal.html">Horizontal timeline</a></li>
                                    <li><a href="timeline_vertical.html">Vertical timeline</a></li>
                                    <li><a href="pricing.html">Pricing Table</a></li>
                                    <li><a href="range_slider.html">Range Slider</a></li>
                                    <li><a href="carousel.html">Carousel</a></li>
                                    <li><a href="code_editor.html">Code editor</a></li>
                                    <li class="mm-active"><a href="gridSystem.html">Grid System</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-book mr-2"></i>
                                    Authentication
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="login.html">Login</a></li>
                                    <li><a href="register.html">Register</a></li>
                                    <li><a href="user_profile.html">Profile</a></li>
                                    <li><a href="forget_password.html">Forget password</a></li>
                                    <li><a href="lockscreen.html">Lockscreen</a></li>
                                    <li><a href="404.html">404 Error</a></li>
                                    <li><a href="505.html">505 Error</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-flow-merge mr-2"></i>
                                    Multi Level Menu
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="#">Menu Item</a></li>
                                    <li><a href="#">Menu Item - 2</a></li>
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">Level - 2</a>
                                        <ul class="nav-third-level">
                                            <li><a href="#">Menu Item</a></li>
                                            <li>
                                                <a class="has-arrow" href="#" aria-expanded="false">Level - 3</a>
                                                <ul class="nav-fourth-level">
                                                    <li><a href="#">Level - 4</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="blank-page.html"><i class="typcn typcn-bookmark mr-2"></i>Blank page</a></li>
                            <li>
                                <a class="has-arrow material-ripple" href="#">
                                    <i class="typcn typcn-puzzle-outline mr-2"></i>
                                    Layouts
                                </a>
                                <ul class="nav-second-level">
                                    <li><a href="layouts_layout.html">Layout</a></li>
                                    <li><a href="layouts_fixed.html">Fixed layout</a></li>
                                    <li><a href="layouts_fixed-without__navbar.html">Fixed layout without navbar</a></li>
                                </ul>
                            </li>
                            <li><a href="changelog.html"><i class="typcn typcn-attachment-outline mr-2"></i>Changelog<span class="badge badge-success ml-auto">v1.1.0</span></a></li>
                            <li><a href="#"><i class="typcn typcn-support mr-2"></i>Documentation</a></li>
                        </ul>
                    </nav>
                </div><!-- sidebar-body -->
            </nav>
            <!-- Page Content  -->
            <div class="content-wrapper">
                <div class="main-content">
                    <nav class="navbar-custom-menu navbar navbar-expand-lg m-0">
                        <div class="sidebar-toggle-icon" id="sidebarCollapse">
                            sidebar toggle<span></span>
                        </div><!--/.sidebar toggle icon-->
                        <div class="d-flex flex-grow-1">
                            <ul class="navbar-nav flex-row align-items-center ml-auto">
                                <li class="nav-item dropdown quick-actions">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-th-large-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="nav-grid-row row">
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-cog-outline d-block"></i>
                                                <span>Settings</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-group-outline d-block"></i>
                                                <span>Users</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-puzzle-outline d-block"></i>
                                                <span>Components</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-chart-bar-outline d-block"></i>
                                                <span>Profits</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-time d-block"></i>
                                                <span>New Event</span>
                                            </a>
                                            <a href="#" class="icon-menu-item col-4">
                                                <i class="typcn typcn-edit d-block"></i>
                                                <span>Tasks</span>
                                            </a>
                                        </div>
                                    </div>
                                </li><!--/.dropdown-->
                                <li class="nav-item">
                                    <a class="nav-link" href="chat.html"><i class="typcn typcn-messages"></i></a>
                                </li>
                                <li class="nav-item dropdown notification">
                                    <a class="nav-link dropdown-toggle badge-dot" href="#" data-toggle="dropdown">
                                        <i class="typcn typcn-bell"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <h6 class="notification-title">Notifications</h6>
                                        <p class="notification-text">You have 2 unread notification</p>
                                        <div class="notification-list">
                                            <div class="media new">
                                                <div class="img-user"><img src="assets/dist/img/avatar.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</h6>
                                                    <span>Mar 15 12:32pm</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media new">
                                                <div class="img-user online"><img src="assets/dist/img/avatar2.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Joyce Chua</strong> just created a new blog post</h6>
                                                    <span>Mar 13 04:16am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar3.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Althea Cabardo</strong> just created a new blog post</h6>
                                                    <span>Mar 13 02:56am</span>
                                                </div>
                                            </div><!--/.media -->
                                            <div class="media">
                                                <div class="img-user"><img src="assets/dist/img/avatar4.png" alt=""></div>
                                                <div class="media-body">
                                                    <h6><strong>Adrian Monino</strong> added new comment on your photo</h6>
                                                    <span>Mar 12 10:40pm</span>
                                                </div>
                                            </div><!--/.media -->
                                        </div><!--/.notification -->
                                        <div class="dropdown-footer"><a href="">View All Notifications</a></div>
                                    </div><!--/.dropdown-menu -->
                                </li><!--/.dropdown-->
                                <li class="nav-item dropdown user-menu">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        <!--<img src="assets/dist/img/user2-160x160.png" alt="">-->
                                        <i class="typcn typcn-user-add-outline"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" >
                                        <div class="dropdown-header d-sm-none">
                                            <a href="" class="header-arrow"><i class="icon ion-md-arrow-back"></i></a>
                                        </div>
                                        <div class="user-header">
                                            <div class="img-user">
                                                <img src="assets/dist/img/avatar-1.jpg" alt="">
                                            </div><!-- img-user -->
                                            <h6>Naeem Khan</h6>
                                            <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4e534a465b474e6b4c464a424705484446">[email&#160;protected]</a></span>
                                        </div><!-- user-header -->
                                        <a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-arrow-shuffle"></i> Activity Logs</a>
                                        <a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
                                        <a href="register.html" class="dropdown-item"><i class="typcn typcn-key-outline"></i> Sign Out</a>
                                    </div><!--/.dropdown-menu -->
                                </li>
                            </ul><!--/.navbar nav-->
                            <div class="nav-clock">
                                <div class="time">
                                    <span class="time-hours"></span>
                                    <span class="time-min"></span>
                                    <span class="time-sec"></span>
                                </div>
                            </div><!-- nav-clock -->
                        </div>
                    </nav><!--/.navbar-->
                    <!--Content Header (Page header)-->
                    <div class="content-header row align-items-center m-0">
                        <nav aria-label="breadcrumb" class="col-sm-4 order-sm-last mb-3 mb-sm-0 p-0 ">
                            <ol class="breadcrumb d-inline-flex font-weight-600 fs-13 bg-white mb-0 float-sm-right">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>
                                <li class="breadcrumb-item"><a href="#">Forms</a></li>
                                <li class="breadcrumb-item active">Select</li>
                            </ol>
                        </nav>
                        <div class="col-sm-8 header-title p-0">
                            <div class="media">
                                <div class="header-icon text-success mr-3"><i class="typcn typcn-puzzle-outline"></i></div>
                                <div class="media-body">
                                    <h1 class="font-weight-bold">Fixed Layout</h1>
                                    <small>From now on you will start your activities.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/.Content Header (Page header)--> 
                    <div class="body-content">
                        <div class="card mb-4">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="fs-17 font-weight-600 mb-0">Project status</h6>
                                    </div>
                                    <div class="text-right">
                                        <div class="actions">
                                            <a href="#" class="action-item"><i class="ti-reload"></i></a>
                                            <div class="dropdown action-item" data-toggle="dropdown">
                                                <a href="#" class="action-item"><i class="ti-more-alt"></i></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="#" class="dropdown-item">Refresh</a>
                                                    <a href="#" class="dropdown-item">Manage Widgets</a>
                                                    <a href="#" class="dropdown-item">Settings</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="my-3">
                                    <h3>How it works</h3>
                                    <p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.</p>
                                    <p>New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.</p>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 border p-2 bg-light">
                                        One of three columns
                                    </div>
                                    <div class="col-md-4 border p-2 bg-light">
                                        One of three columns
                                    </div>
                                    <div class="col-md-4 border p-2 bg-light">
                                        One of three columns
                                    </div>
                                </div>

                                <div class="my-3 py-3">
                                    <h3 class="mt-0">Grid options</h3>
                                    <p>The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.</p>
                                    <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th> Small devices <small>Tablets (≥576px)</small> </th>
                                                    <th> Medium devices <small>Desktops (≥768px)</small> </th>
                                                    <th> Large devices <small>Desktops (≥992px)</small> </th>
                                                    <th> Extra Large devices <small>Desktops (≥1200px)</small> </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Grid behavior</th>
                                                    <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Container width</th>
                                                    <td>576px</td>
                                                    <td>768px</td>
                                                    <td>992px</td>
                                                    <td>1200px</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Class prefix</th>
                                                    <td><code>.col-sm-</code></td>
                                                    <td><code>.col-md-</code></td>
                                                    <td><code>.col-lg-</code></td>
                                                    <td><code>.col-xl-</code></td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row"># of columns</th>
                                                    <td colspan="4">12</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Gutter width</th>
                                                    <td colspan="4">30px (15px on each side of a column)</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Nestable</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Offsets</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                                <tr>
                                                    <th class="text-nowrap" scope="row">Column ordering</th>
                                                    <td colspan="4">Yes</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Auto-layout columns</h3>
                                    <p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.</p>
                                    <h3>Equal-width</h3>
                                    <p>For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
                                    <div class="row my-3">
                                        <div class="col-6 border p-2 bg-light">1 of 2</div>
                                        <div class="col-6 border p-2 bg-light">2 of 2</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-4 border p-2 bg-light">1 of 3</div>
                                        <div class="col-4 border p-2 bg-light">2 of 3</div>
                                        <div class="col-4 border p-2 bg-light">3 of 3</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <p>Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit <span class="text-danger">flex-basis</span> or<span class="text-danger"> border</span>. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.</p>
                                    <div class="row mt-3">
                                        <div class="col-6 border p-2 bg-light">Column</div>
                                        <div class="col-6 border p-2 bg-light">Column</div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-6 border p-2 bg-light">Column</div>
                                        <div class="col-6 border p-2 bg-light">Column</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Setting one column width</h3>
                                    <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>
                                    <div class="row mt-3">
                                        <div class="col border p-2 bg-light">1 of 3</div>
                                        <div class="col-6 border p-2 bg-light">2 of 3 (wider)</div>
                                        <div class="col border p-2 bg-light">3 of 3</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col p-2 border bg-light">
                                            1 of 3
                                        </div>
                                        <div class="col-5 p-2 border bg-light">
                                            2 of 3 (wider)
                                        </div>
                                        <div class="col p-2 border bg-light">
                                            3 of 3
                                        </div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Variable width content</h3>
                                    <p>Use <span class="text-danger">col-{breakpoint}-auto</span> classes to size columns based on the natural width of their content.</p>
                                    <div class="row justify-content-md-center">
                                        <div class="col col-lg-2 border bg-light p-2">
                                            1 of 3
                                        </div>
                                        <div class="col-md-auto border bg-light p-2">
                                            Variable width content
                                        </div>
                                        <div class="col col-lg-2 border bg-light p-2">
                                            3 of 3
                                        </div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col border bg-light p-2">
                                            1 of 3
                                        </div>
                                        <div class="col-md-auto border bg-light p-2">
                                            Variable width content
                                        </div>
                                        <div class="col col-lg-2 border bg-light p-2">
                                            3 of 3
                                        </div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Responsive classes</h3>
                                    <p>Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>
                                    <h3>All breakpoints</h3>
                                    <p>For grids that are the same from the smallest of devices to the largest, use the<span class="text-danger"> .col</span> and <span class="text-danger">.col-*</span> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <span class="text-danger">.col</span>.</p>
                                    <div class="row my-3">
                                        <div class="col border bg-light p-2">col</div>
                                        <div class="col border bg-light p-2">col</div>
                                        <div class="col border bg-light p-2">col</div>
                                        <div class="col border bg-light p-2">col</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-8 border bg-light p-2">col-8</div>
                                        <div class="col-4 border bg-light p-2">col-4</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Stacked to horizontal</h3>
                                    <p>Using a single set of <span class="text-danger">.col-sm-*</span> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<span class="text-danger">sm</span>).</p>
                                    <div class="row my-3">
                                        <div class="col-sm-8 border bg-light p-2">col-sm-8</div>
                                        <div class="col-sm-4 border bg-light p-2">col-sm-4</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-sm border bg-light p-2">col-sm</div>
                                        <div class="col-sm border bg-light p-2">col-sm</div>
                                        <div class="col-sm border bg-light p-2">col-sm</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Mix and match</h3>
                                    <p>Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>
                                    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                                    <div class="row my-3">
                                        <div class="col-12 col-md-8 border bg-light p-2">.col-12 .col-md-8</div>
                                        <div class="col-6 col-md-4 border bg-light p-2">.col-6 .col-md-4</div>
                                    </div>

                                    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                                    <div class="row my-3">
                                        <div class="col-6 col-md-4 border bg-light p-2">.col-6 .col-md-4</div>
                                        <div class="col-6 col-md-4 border bg-light p-2">.col-6 .col-md-4</div>
                                        <div class="col-6 col-md-4 border bg-light p-2">.col-6 .col-md-4</div>
                                    </div>

                                    <!-- Columns are always 50% wide, on mobile and desktop -->
                                    <div class="row my-3">
                                        <div class="col-6 border bg-light p-2">.col-6</div>
                                        <div class="col-6 border bg-light p-2">.col-6</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Gutters</h3>
                                    <p>Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the<span class="text-danger"> .row</span> and matching padding utilities on the <span class="text-danger">.col</span>s. The <span class="text-danger">.container</span> or<span class="text-danger"> .container-fluid</span> parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.</p>
                                    <p>Here’s an example of customizing the Bootstrap grid at the large (<span class="text-danger">lg</span>) breakpoint and above. We’ve increased the <span class="text-danger">.col</span> padding with <span class="text-danger">.px-lg-5</span>, counteracted that with <span class="text-danger">.mx-lg-n5</span> on the parent <span class="text-danger">.row</span> and then adjusted the <span class="text-danger">.container</span> wrapper with <span class="text-danger">.px-lg-5</span>.</p>
                                    <div class="container px-lg-5">
                                        <div class="row mx-lg-n5">
                                            <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
                                            <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Alignment</h3>
                                    <div class="row justify-content-start my-3">
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-center my-3">
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-end my-3">
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-around my-3">
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                    </div>
                                    <div class="row justify-content-between my-3">
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                        <div class="col-4 border bg-light p-2">
                                            One of two columns
                                        </div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Column wrapping</h3>
                                    <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
                                    <div class="row">
                                        <div class="col-9 border bg-light p-2">.col-9</div>
                                        <div class="col-4 border bg-light p-2">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
                                        <div class="col-6 border bg-light p-2">.col-6<br>Subsequent columns continue along the new line.</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Column breaks</h3>
                                    <p>Breaking columns to a new line in flexbox requires a small hack: add an element <span class="text-danger">with width: 100%</span> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <span class="text-danger">.row</span>s, but not every implementation method can account for this.</p>
                                    <div class="row">
                                        <div class="col-6 col-sm-3 border bg-light p-2">.col-6 .col-sm-3</div>
                                        <div class="col-6 col-sm-3 border bg-light p-2">.col-6 .col-sm-3</div>
                                        <!-- Force next columns to break to new line -->
                                        <div class="w-100"></div>

                                        <div class="col-6 col-sm-3 border bg-light p-2">.col-6 .col-sm-3</div>
                                        <div class="col-6 col-sm-3 border bg-light p-2">.col-6 .col-sm-3</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Reordering</h3>
                                    <h3>Order classes</h3>
                                    <p>Use <span class="text-danger">.order-</span> classes for controlling the visual order of your content. These classes are responsive, so you can set the <span class="text-danger">order</span> by breakpoint (e.g., <span class="text-danger">.order-1.order-md-2</span>). Includes support for 1 through 12 across all five grid tiers.</p>
                                    <div class="row">
                                        <div class="col border bg-light p-2">
                                            First, but unordered
                                        </div>
                                        <div class="col order-12 border bg-light p-2">
                                            Second, but last
                                        </div>
                                        <div class="col order-1 border bg-light p-2">
                                            Third, but first
                                        </div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Offsetting columns</h3>
                                    <p>You can offset grid columns in two ways: our responsive <span class="text-danger">.offset-</span> grid classes and our <a class="text-primary" href="https://getbootstrap.com/docs/4.3/utilities/spacing/">margin utilities.</a> Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p>
                                    <h3>Offset classes</h3>
                                    <p>Move columns to the right using <span class="text-danger">.offset-md-*</span> classes. These classes increase the left margin of a column by <span class="text-danger">*</span> columns. For example, <span class="text-danger">.offset-md-4</span> moves <span class="text-danger">.col-md-4</span> over four columns.</p>
                                    <div class="row my-3">
                                        <div class="col-md-4 border bg-light p-2">.col-md-4</div>
                                        <div class="col-md-4 offset-md-4 border bg-light p-2">.col-md-4 .offset-md-4</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-md-3 offset-md-3 border bg-light p-2">.col-md-3 .offset-md-3</div>
                                        <div class="col-md-3 offset-md-3 border bg-light p-2">.col-md-3 .offset-md-3</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-md-6 offset-md-3 border bg-light p-2">.col-md-6 .offset-md-3</div>
                                    </div>
                                </div>
                                <div class="my-3 py-3">
                                    <h3>Margin utilities</h3>
                                    <p>With the move to flexbox in v4, you can use margin utilities like <span class="text-danger">.mr-auto</span> to force sibling columns away from one another.</p>
                                    <div class="row my-3">
                                        <div class="col-md-4 border bg-light p-2">.col-md-4</div>
                                        <div class="col-md-4 ml-auto border bg-light p-2">.col-md-4 .ml-auto</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-md-3 ml-md-auto border bg-light p-2">.col-md-3 .ml-md-auto</div>
                                        <div class="col-md-3 ml-md-auto border bg-light p-2">.col-md-3 .ml-md-auto</div>
                                    </div>
                                    <div class="row my-3">
                                        <div class="col-auto mr-auto border bg-light p-2">.col-auto .mr-auto</div>
                                        <div class="col-auto border bg-light p-2">.col-auto</div>
                                    </div>

                                </div>










                            </div>
                        </div>
                    </div><!--/.body content-->
                </div><!--/.main content-->
                <footer class="footer-content">
                    <div class="footer-text d-flex align-items-center justify-content-between">
                        <div class="copy">© 2018 Bdtask Responsive Bootstrap 4 Dashboard Template</div>
                        <div class="credit">Designed by: <a href="http://www.bootstrapmb.com/">Bdtask</a></div>
                    </div>
                </footer><!--/.footer content-->
                <div class="overlay"></div>
            </div><!--/.wrapper-->
        </div>
        <!--Global script(used by all pages)-->
        <script src="assets/plugins/jQuery/jquery-3.4.1.min.js"></script>
        <script src="assets/dist/js/popper.min.js"></script>
        <script src="http://cdn.bootstrapmb.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="assets/plugins/metisMenu/metisMenu.min.js"></script>
        <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
        <!-- Third Party Scripts(used by this page)-->

        <!--Page Active Scripts(used by this page)-->

        <!--Page Scripts(used by all page)-->
        <script src="assets/dist/js/sidebar.js"></script>
    </body>
</html>